<template>
  <view class="container" :class="{night: isNight}" @click="toggleControl">
    <!-- 顶部导航栏 -->
    <view class="header" v-show="showControl">
      <view class="left">
        <text class="back-icon">←</text>
        <text class="title">{{bookTitle}}</text>
      </view>
      <text class="chapter">{{currentChapter}}</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      class="content" 
      :style="{fontSize: fontSize + 'px', lineHeight: lineHeight + 'px'}"
      scroll-y
      @scroll="onScroll"
    >
      <text class="text">{{content}}</text>
    </scroll-view>

    <!-- 底部控制栏 -->
    <view class="footer" v-show="showControl">
      <view class="progress">
        <text>{{progress}}%</text>
      </view>
      <view class="controls">
        <view class="btn" @click="changeFontSize(-2)">
          <text>A-</text>
        </view>
        <view class="btn" @click="toggleNight">
          <text>{{ isNight ? '日间' : '夜间' }}</text>
        </view>
        <view class="btn" @click="showChapterList">
          <text>目录</text>
        </view>
        <view class="btn" @click="changeFontSize(2)">
          <text>A+</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const bookTitle = ref('小说标题')
const currentChapter = ref('第一章')
const content = ref('这里是小说正文内容...')
const showControl = ref(true)
const isNight = ref(false)
const fontSize = ref(16)
const lineHeight = computed(() => fontSize.value + 12)
const progress = ref(0)

// 方法
const toggleControl = () => {
  showControl.value = !showControl.value
}

const toggleNight = () => {
  isNight.value = !isNight.value
}

const changeFontSize = (size) => {
  fontSize.value = Math.max(12, Math.min(24, fontSize.value + size))
}

const showChapterList = () => {
  uni.navigateTo({
    url: '/pages/chapterList/chapterList'
  })
}

const onScroll = (e) => {
  const scrollTop = e.detail.scrollTop
  const maxScroll = e.detail.scrollHeight - e.detail.viewHeight
  progress.value = Math.round((scrollTop / maxScroll) * 100) || 0
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f5eee5;
  transition: background-color 0.3s;

  &.night {
    background-color: #333;
    color: #888;
    
    .header, .footer {
      background: rgba(0,0,0,0.8) !important;
      color: #888;
    }
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: rgba(255,255,255,0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  
  .left {
    display: flex;
    align-items: center;
    
    .back-icon {
      margin-right: 20rpx;
      font-weight: bold;
    }
    
    .title {
      max-width: 400rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.content {
  padding: 100rpx 40rpx;
  height: calc(100vh - 200rpx);
  
  .text {
    text-indent: 2em;
    letter-spacing: 2rpx;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: rgba(255,255,255,0.9);
  
  .progress {
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .controls {
    display: flex;
    justify-content: space-around;
    
    .btn {
      padding: 15rpx 30rpx;
      border-radius: 10rpx;
      background: #f0f0f0;
    }
  }
}
</style>